<template>
  <div id="user">
    <div class="userBg" />
    <div class="userInfoBgF flex column aCenter">
      <div class="userInfoBg flex column aCenter">
        <div class="userIconF flex column aCenter">
          <div class="userIcon">
            <img
              style="width: 73px; height: 73px; border-radius: 50%"
              :src="head_img"
            />
          </div>
          <div>{{ nickname }}</div>
        </div>
        <div style="width: 100%" class="flex jCenter">
          <div class="line" />
        </div>
        <div class="nav">
          <van-grid clickable :column-num="3" :border="false">
            <van-grid-item text="订单" to="/myorder?active=0">
              <template #icon>
                <div class="iconB flex aCenter jCenter">
                  <img src="../../assets/img/iconB.png" />
                </div>
              </template>
            </van-grid-item>
            <van-grid-item icon="home-o" text="待付款" to="/myorder?active=1">
              <template #icon>
                <div class="iconY flex aCenter jCenter">
                  <img src="../../assets/img/iconY.png" />
                </div>
              </template>
            </van-grid-item>
            <van-grid-item icon="home-o" text="待出行" to="/myorder?active=2">
              <template #icon>
                <div class="iconR flex aCenter jCenter">
                  <img src="../../assets/img/iconR.png" />
                </div>
              </template>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
    <div class="optionF flex jCenter">
      <div class="option">
        <div class="title flex aCenter">
          <div class="lineF" />
          <div>所有功能</div>
        </div>
        <div class="borderT">
          <van-cell :border="false" title="个人资料" is-link to="/userInfo">
            <template #icon>
              <div class="iconBtn1 flex aCenter jCenter">
                <img src="../../assets/img/personal_data.png" />
              </div>
            </template>
          </van-cell>
        </div>
        <div class="borderT">
          <van-cell
            :border="false"
            title="常用乘客信息"
            to="/CommonInfo"
            is-link
          >
            <template #icon>
              <div
                class="iconBtn1 flex aCenter jCenter"
                style="background-color: #4ec7ff"
              >
                <img src="../../assets/img/customers.png" />
              </div>
            </template>
          </van-cell>
        </div>
        <div class="borderT">
          <van-cell :border="false" title="意见反馈" to="/Feedback" is-link>
            <template #icon>
              <div
                class="iconBtn1 flex aCenter jCenter"
                style="background-color: #0fa1a0"
              >
                <img src="../../assets/img/Feedback.png" />
              </div>
            </template>
          </van-cell>
        </div>
        <div class="borderT iconNone">
          <van-cell
            to="/withdraw"
            :border="false"
            title="我的账号"
            is-link
            :value="'¥' + balance"
          >
            <template #icon>
              <div
                class="iconBtn1 flex aCenter jCenter"
                style="background-color: #f35b47"
              >
                <van-icon name="balance-o" color="#fff" />
              </div>
            </template>
          </van-cell>
        </div>
        <div class="borderT">
          <van-cell :border="false" title="分享赚钱" to="/share" is-link>
            <template #icon>
              <div
                class="iconBtn1 flex aCenter jCenter"
                style="background-color: #480fa1"
              >
                <van-icon name="share-o" color="#fff" />
              </div>
            </template>
          </van-cell>
        </div>
        <div class="borderT iconNone">
          <van-cell
            @click="show = true"
            :border="false"
            title="联系我们"
            is-link
            :value="mobile"
          >
            <template #icon>
              <div
                class="iconBtn1 flex aCenter jCenter"
                style="background-color: #f35b47"
              >
                <img src="../../assets/img/callus.png" />
              </div>
            </template>
          </van-cell>
        </div>
        <div class="borderT iconNone">
          <van-cell
            @click="showT = true"
            :border="false"
            title="包车电话"
            is-link
            value="18728730121"
          >
            <template #icon>
              <div
                class="iconBtn1 flex aCenter jCenter"
                style="background-color: #f37a49"
              >
                <img src="../../assets/img/car_icon.png" />
              </div>
            </template>
          </van-cell>
        </div>
        <div class="borderT iconNone">
          <van-cell
            @click="showT = true"
            :border="false"
            title="投诉电话"
            is-link
            value="0827-5233429"
          >
            <template #icon>
              <div
                class="iconBtn1 flex aCenter jCenter"
                style="background-color: #f35b47"
              >
                <img src="../../assets/img/complaint.png" />
              </div>
            </template>
          </van-cell>
        </div>
      </div>
    </div>
    <van-dialog
      :beforeClose="chargeBtn"
      v-model="show"
      show-cancel-button
      confirmButtonText="拨打"
    >
      <div class="dialog flex column aCenter jCenter">
        <div>确认拨打电话</div>
        <div>{{ mobile }}</div>
      </div>
    </van-dialog>
    <van-dialog
      :beforeClose="chargeBtn_"
      v-model="showT"
      show-cancel-button
      confirmButtonText="拨打"
    >
      <div class="dialog flex column aCenter jCenter">
        <div>确认拨打电话</div>
        <div>0827-5233429</div>
      </div>
    </van-dialog>
    <van-dialog
      :beforeClose="chargeBtn_"
      v-model="showT"
      show-cancel-button
      confirmButtonText="拨打"
    >
      <div class="dialog flex column aCenter jCenter">
        <div>确认拨打电话</div>
        <div>0827-5233429</div>
      </div>
    </van-dialog>
    <FooterBar />
    <Loading :isLoading="isLoading" />
  </div>
</template>

<script>
import FooterBar from "components/FooterBar.vue";
import Loading from "components/Loading.vue";

export default {
  data() {
    return {
      mobile: "028-254525",
      show: false,
      showT: false,
      head_img: "",
      nickname: "",
      balance: "",
      uid: undefined,
      isLoading: true,
    };
  },
  components: {
    FooterBar,
    Loading,
  },
  methods: {
    chargeBtn(action, done) {
      console.log("111");
      if (action === "confirm") {
        location.href = "tel:" + this.mobile;
        this.show = false;
      } else if (action === "cancel") {
        done();
      }
      done();
    },
    chargeBtn_(action, done) {
      if (action === "confirm") {
        location.href = "tel:" + "0827-5233429";
        this.show = false;
      } else if (action === "cancel") {
        done();
      }
      done();
    },
  },
  beforeMount() {},
  created() {
    let data = {
      token: this.$store.state.token,
    };
    this.$axios
      .post(this.$index + this.$api.user.personal, this.$Qs.stringify(data))
      .then((res) => {
        console.log(res);
        if (res.data.flag) {
          this.nickname = res.data.data.nickname;
          this.balance = res.data.data.balance;
          this.head_img = res.data.data.head_img;
          this.mobile = res.data.data.sys_telephone;
          this.uid = res.data.data.id;
          localStorage.setItem("myUid", res.data.data.id);
          this.isLoading = false;
        } else {
          this.$toast.fail(res.data.msg);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
.userInfoBgF {
  width: 100%;
}
.userBg {
  width: 100%;
  height: 135px;
  background-color: #0fa1a0;
  z-index: -1;
  position: absolute;
}

.userInfoBg {
  margin-top: 49px;
  width: 92%;
  height: 197px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 3px 0 8px rgba(10, 13, 47, 0.08);
}

.userIconF {
  margin-top: -13px;
  font-size: 18px;
  color: #333333;
  margin-bottom: 22px;
}

.userIcon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.line {
  width: 338.5px;
  height: 1px;
  background-color: #f7f7f7;
}

.nav {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.iconB {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #59e2f6;
  margin-bottom: 10px;
}

.iconY {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #ffc63d;
  margin-bottom: 10px;
}

.iconR {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #d83e3e;
  margin-bottom: 10px;
}

.optionF {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 12px;
}

.option {
  width: 92%;
  font-size: 16px;
  color: #7b7b7b;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 3px 0 8px rgba(10, 13, 47, 0.08);
  overflow: hidden;
}

.lineF {
  width: 3.5px;
  height: 14px;
  background-color: #0fa1a0;
  margin-right: 10px;
  margin-top: 1px;
}

.title {
  margin-top: 20px;
  margin-bottom: 17px;
}

.iconBtn1 {
  width: 27px;
  height: 27px;
  border-radius: 10px;
  background-color: #0fa1a0;
  margin-right: 10px;
}

.borderT {
  border-top: 1px solid #f8f8f8;
}

/deep/ .van-cell {
  font-size: 15px;
  color: #666666;
  padding: 13px 16px;
}

/deep/ .van-cell__value {
  color: #0fa0a0;
}

.iconNone /deep/ .van-cell__right-icon {
  display: none;
}
.dialog {
  height: 120px;
  font-size: 18px;
  color: #333333;
}
.dialog div {
  margin-top: 16px;
}
</style>